<script setup>
import {onMounted, ref, watch} from 'vue'
import {SUCCESS} from "@/core/constants/HttpStatus";
import {ElMessage} from "element-plus";
import {getPageByCommentCount} from "@/api/post";
import {onBeforeRouteUpdate, useRouter} from "vue-router";

// props
// 论坛主题type
let {type} = defineProps({
  type: String
})
let typeEnum = ref(mapTypeToEnum(type));
// 切换类型
onBeforeRouteUpdate((to, from, next) => {
  console.log(to)
  const fullPath = to.fullPath;
  const typeName = fullPath.split('/')[3];
  console.log('@@type', typeName)
  typeEnum.value = mapTypeToEnum(typeName);
  if(typeEnum.value === undefined) {
    next("/salon/forum/idea")
    return;
  }
  loadPage(1, typeEnum.value);
  next()
})
// 初次进入
onMounted(()=>{
  // 如果type不存在，则重定向到idea页面
  if(typeEnum.value === undefined) {
    router.push({name: 'forum',params:{type:'idea'}})
    return;
  }
  loadPage(currentPage.value, typeEnum.value);
})
function mapTypeToEnum(typeName) {
  switch (typeName) {
    case 'idea': return '0';
    case 'team': return '1';
    case 'market': return '2';
    case 'chat': return '3';
  }
}

const router = useRouter();

const PageSize = 10;
let currentPage = ref(1);   // 当前页数
let postList = ref([]);     // 帖子列表
let total = ref(0);         // 帖子总数
let pages = ref(0);         // 帖子总页数(size=10)
let isAsc = ref(false)      // 评论数是否递增排序
const text = ref('');       // 搜索框

watch(isAsc, ()=>loadPage(1, typeEnum.value, 'comments', text.value));

// 根据标志获取图标类型
const getIconClass = (type) => {
  switch (type) {
    case '0':
      return 'iconfont icon-jiaoliutaolun';
    case '1':
      return 'iconfont icon-zuduiqingqiu';
    case '2':
      return 'iconfont icon-zhaomu';
    case '3':
      return 'iconfont icon-zhaomu';
    default:
      return ''; // 添加默认的图标类名或空字符串
  }
};
//搜索框
const search = () => {
  loadPage(1, typeEnum.value, 'comments', text.value);
};

const loadPage = async (pageNum, type, sortBy='comments', searchKeyword='') => {
  // console.log(searchKeyword)
  try {
    const res = await getPageByCommentCount({
      orderByCommentCount: isAsc.value ? 'asce':'desc',
      currentPage: pageNum || 1,
      pageSize: PageSize,
    },sortBy, searchKeyword, type)
    console.log(res.data);
    const {code, data, msg} = res.data;
    if (code == SUCCESS) {
      postList.value = data.records;
      total.value = Number(data.total);
      pages.value = Number(data.pages);
    } else {
      throw new Error(msg);
    }
  } catch (error) {
    ElMessage.error(error.message || "帖子数据请求失败");
  }
};
//分页
const handleCurrentChange = (val) => {
  console.log('@change page', val)
  currentPage.value = val;
  loadPage(currentPage.value, typeEnum.value);
};

</script>

<template>
  <div class="forum">
    <div class="topSearch">
      <div class="search">
        <img src="@/assets/images/搜索.png">
        <input type="text" v-model="text">
        <div class="searchBtn">
          <button class="btn" @click="search">搜 索</button>
        </div>
      </div>
      <div class="post-btn" @click="router.push('/salon/create')"><span>发帖 &gt</span></div>
    </div>
    <div class="postWrapper">
      <div class="wrapper-top">
        <div class="count"> {{ total }}条消息</div>
        <div class="sort">
          <span>热度排序</span>
          <img src="@/assets/images/arrow-up-icon.png" class="icon" @click="isAsc = true">
          <img src="@/assets/images/arrow-down-icon.png" class="icon" @click="isAsc = false">
        </div>
      </div>
      <div class="wrapper-body">
        <ul class="post-list">
          <li v-for="(item, index) in postList" :key="item.id" class="post-card-item">
            <div class="type-icon">
              <i :class="getIconClass(item.type)"></i>
            </div>
            <div class="post-title">
              <router-link :to="{
                name: 'post',
                params: {postId:item.id}
              }" class="LN">{{
                  item.title
                }}</router-link>
            </div>
            <div class="name-box">
              <img class="icon" src="@/assets/images/用户名.png">
              <span class="nickname">{{ item.unickname }}</span>
            </div>
            <div class="post-time-box">
              <img class="icon" src="@/assets/images/时钟.png">
              <span class="time">{{ item.releaseTime }}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="wrapper-bottom">
        <template v-if="postList.length">
          <el-pagination
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="total"
              :page-size="PageSize"
              :hide-on-single-page="false"
          >
          </el-pagination>
        </template>
        <template v-else>
          <div class="no-content-tip">暂无数据</div>
        </template>
    </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

.no-content-tip {
  line-height: 100px;
  text-align: center;
  font-size: 18px;
}
.topSearch {
  position: relative;
  .search {
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    width: 650px;
    height: 40px;
    margin: 0 auto;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 320px;

    img {
      width: 20px;
      height: 20px;
    }

    input {
      border: 0;
      font-size: medium;
      outline: none;
      width: 80%;
      height: 30px;
    }

    .searchBtn .btn {
      width: 80px;
      height: 26px;
      background-color: #62c4da;
      border-radius: 14px;
      font-weight: 600;
      color: whitesmoke;
      border-style: none;
      word-spacing: 6px;
      text-align: center;
      cursor: pointer;
    }
  }
  .post-btn {
    width: 100px;
    height: 32px;
    border-radius: 16px;
    background-color: #62c4da;
    text-align: center;
    line-height: 32px;
    position: absolute;
    right: 200px;
    top: 4px;
    color: white;
    cursor: pointer;
  }
}

.postWrapper {
  padding: 20px 0;
  width: 95%;
}

.wrapper-top {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 14px;

  .count {
    float: left;
  }

  .sort {
    float: right;
    display: flex;
    align-items: center;

    span {
      margin-right: 10px;
    }

    img.icon {
      width: 15px;
      margin-right: 3px;
      cursor: pointer;
    }
  }
}

.post-card-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  .type-icon {
    width: 30px;
    flex: none;
  }
  .post-title {
    font-weight: 550;
    font-size: 21px;
    flex: 0 0 690px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .LN{
      color: rgba(0, 0, 0, 0.767);
    }
  }
  
  img.icon {
    margin-right: 5px;
  }
  .name-box, .post-time-box {
    display: flex;
    align-items: center;
  }
  .name-box {
    width: 120px;
    line-height: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .nickname {
      color: #b7b5b5;
    }
  }
  .post-time-box {
    .time {
      color: #b7b5b5;
    }
  }

}

.wrapper-bottom {
  margin-top: 20px;
  text-align: center;
  color: #b7b5b5;
  height: 30px;
  .el-pagination {
    justify-content: center;
  }
}

.icon-jiaoliutaolun {
  font-size: x-large !important;;
  color: rgb(234, 156, 54);
  //border: 1px solid red;
}

.icon-zuduiqingqiu {
  font-size: x-large !important;;
  color: #1cb6a4;
  //border: 1px solid red;
}

.icon-zhaomu {
  //border: 1px solid red;
  font-size: x-large !important;;
  color: rgb(58, 101, 218);
}

</style>
